<template>
  <div class="good-item" @click="itemClick">
      <img v-lazy="showImg" @load="imageLoad"  alt=""/>
      <p class="good-t">{{goodsItem.title}}</p>
      <p class="price-cfav">
          <span class="price">{{goodsItem.price}}</span>
          <span><i class="cf-icon"></i>{{goodsItem.cfav}}</span>
      </p>
  </div>
</template>
<script>
export default {
  name: 'CodeGoodslistitem',
  props:{
    goodsItem:{
      type:Object,
      default(){
        return {}
      }
    }
  },
  computed:{
    showImg(){
        return this.goodsItem.image || this.goodsItem.show.img 
    }
  },
  components: { },
  directives: { },
  data() {
    return {
      
    };
  },
  mounted() {
    
  },
  methods: {
     imageLoad(){
       //事件总线
      //  if(this.$route.path.indexOf('/home')){
      //       this.$bus.$emit('load')
      //  }
          this.$bus.$emit('load')
     },
     itemClick(){
        //this.$router.push('/detail/'+this.goodsItem.iid)
        this.$router.push({
          path:'/detail',
          query:{
            iid:this.goodsItem.iid
          }
        })
     }
  },
};
</script>
<style scoped>
.good-item {
  width:46%;
  margin:0 5px 5px;
  position: relative;
}
.good-item img{
  width:100%;
  height:auto;
  border-radius: 5px;
}
.good-t{
  font-size:14px;
  color:#000;
  text-align: center;
  line-height: 16px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.price-cfav{
  text-align: center;
  font-size:0;
  line-height: 16px;
  margin-top: 5px;
}
.price-cfav span{
  vertical-align: top;
  display: inline-block;
   font-size:14px;
   margin:0 10px;
}
.price{
  color: darkgoldenrod;
}
.cf-icon{
  display: inline-block;
  vertical-align: top;
  width:20px;
  height:20px;
  background: url(~assets/img/common/collect.svg) no-repeat 100%/100%;
  margin:-3px 5px 0;
}
</style>